<template>
	<view>
		<view>
		  <view class="boaoqwk">
		    <view>头像</view>
		    <view class="nrhengx">
		      <image class="touxiang" :src="user.touxiang||user.sex==1?'../../static/touxn.png':user.sex==2?'../../static/touxnv.png':'../../static/touxw.png'" mode="aspectFill"/>
		      <!-- <image class="gobaoq" src="../../static/jinru.png" /> -->
		    </view>
		  </view>
		  <view class="boaoqwk" @click="tanchulr('昵称')">
		    <view class="biaoti">昵称</view>
		    <view class="nrhengx">
		      <view class="neirong">{{user.nickname||'未设置'}}</view>
		      <image class="gobaoq" src="../../static/jinru.png" />
		    </view>
		  </view>
		  <view class="boaoqwk" @click="tanchulr('姓名')">
		    <view class="biaoti">姓名</view>
		    <view class="nrhengx">
		      <view class="neirong">{{user.name||'未设置'}}</view>
		      <image class="gobaoq" src="../../static/jinru.png" />
		    </view>
		  </view>
		  <view class="boaoqwk">
		    <view class="biaoti">性别</view>
		    <view class="nrhengx">
				<view @click="gontgbiexz(1)" :class="user.sex==1?'xuanz':'wxze'">男</view>
				<view @click="gontgbiexz(2)" :class="user.sex==2?'xuanz':'wxze'">女</view>
		      <!-- <image class="gobaoq" src="../../static/jinru.png" /> -->
		    </view>
		  </view>
		  <view class="boaoqwk">
		    <view class="biaoti">出生年月</view>
		    <view class="nrhengx">
				<picker mode="date" :value="user.birthday"  :start="startDate" :end="endDate" @change="getksriqi">
					<view>{{user.birthday||'选择出生年月'}}</view>
				</picker>
				<image class="gobaoq" src="../../static/jinru.png" />
		    </view>
		  </view>
		  <view class="baocun" @click="saveInfo">保存</view>
		  <!-- <view class="tuicdw" @click="tuichudl">退出登录</view> -->
		</view>
		<view class="mengban" v-if="tanczt">
		  <view class="neirkuan">
		    <view class="biaotinr">请输入{{dqxz}}</view>
		    <input class="shuruk" type="text" @input="inputDqxz" :placeholder="'请输入'+dqxz"/>
		    <view class="annquy">
		      <view class="quxiao" @click="tanchulr">取消</view>
		      <view class="queren" @click="tanchulr">确认</view>
		    </view>
		  </view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				user:null,
				tanczt: false,
				dqxz: '',
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad:function(){
			
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'user_key',
				success: function (res) {
					that.user = res.data;
				}
			})
		},
		methods: {
			// 选择开始日期
			getksriqi: function(e) {
				this.user.birthday=e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				console.log(year)
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year - 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 弹出框切换
			tanchulr(e) {
				console.log(e)
				this.tanczt= !this.tanczt;
				this.dqxz = e == undefined ? '' : e
			},
			inputDqxz(e) {
			    if (this.dqxz == "昵称") {
			      this.user.nickname = e.detail.value
			    }
			    if (this.dqxz == "姓名") {
			      this.user.name = e.detail.value
			    }
			},
			gontgbiexz(sex){
				this.user.sex = sex;
			},
			// 退出登录
			tuichudl(){
				wx.showModal({
					title: '提示',
					content: '确认要退出吗？',
					success: function (es) {
						if (es.confirm) {  
							uni.removeStorage({
								key:'user_key',
								success:function() {
									uni.reLaunch({
										url:'../lodng/lodng'
									})
								}
							})
						} else {   
						  console.log('点击取消回调')
						}
					}
				})
			},
			// 修改信息
			saveInfo() {
			    var that = this;
				wx.showLoading({
					title:'修改中……'
				});
				wx.request({
					url: getApp().globalData.url+'/api/SetUser',
					data: {
						id: that.user.id,
						touxiang:that.user.touxiang,
						nickname:that.user.nickname,
						name: that.user.name,
						sex: that.user.sex,
						birthday:that.user.birthday,
						phone:that.user.phone
					},
					header: {
						"Content-Type": "application/json"
					},
					success(res) {
						console.log(res);
						if(res.data.data.code==200){
							wx.hideLoading();
							uni.setStorage({
								key: 'user_key',
								data: that.user,
								success: function () {
									uni.getStorage({
										key: 'user_key',
										success: function (e) {
											that.user = e.data;
											wx.showToast({
											    title: '保存成功',
											    icon: 'success', 
											    duration: 2000     
											}) 
										}
									})
								}
							})
						}else{
							wx.hideLoading();
							wx.showToast({
							    title: '修改失败，请重试',
							    icon: 'none', 
							    duration: 2000     
							}) 
						}
					}
				})
			},
		}
	}
</script>

<style>
	page{
	  background:#f0f0f0;
	}
	.shangxia{
	  margin: 10rpx 20rpx;
	  background: #ffffff;
	  padding: 30rpx 30rpx;
	  border: solid 1rpx #d1d1d1;
	  border-radius: 20rpx;
	  
	}
	.hengx{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  
	}
	.gobaoq{
	  width: 40rpx;
	  height: 40rpx;
	  margin-left: 5rpx;
	}
	.dizhi{
	  color: #808080;
	  margin-top: 10rpx;
	}
	.boaoqwk{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin: 10rpx 20rpx;
	  background: #ffffff;
	  padding: 20rpx 30rpx;
	  border: solid 1rpx #d1d1d1;
	  border-radius: 20rpx;
	  
	}
	.biaoti{
	  margin: 20rpx 0;
	}
	.nrhengx{
	  display: flex;
	  align-items: center;
	}
	.xuanz{
		margin-right: 50rpx;
		padding: 5rpx 30rpx;
		background: #008BE7;
		border-radius: 20rpx;
		color: #ffffff;
	}
	.wxze{
		margin-right: 50rpx;
		padding: 5rpx 30rpx;
		background: #e7e7e7;
		border-radius: 20rpx;
		color: #8c8c8c;
	}
	.erwm{
	  width: 50rpx;
	  height: 50rpx;
	}
	.touxiang{
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 50rpx;
	}
	.neirong{
	  color: #808080;
	}
	.gobaoq{
	  width: 40rpx;
	  height: 40rpx;
	  margin-left: 5rpx;
	}
	.mengban{
	  position: fixed;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #00000085;
	  width: 100%;
	  height: 100%;
	  top: 0;
	}
	.neirkuan{
	  width: 550rpx;
	  padding: 30rpx;
	  background: #ffffff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	}
	.biaotinr{
	  font-size: 35rpx;
	  font-weight: bold;
	}
	.shuruk{
	  width: 490rpx;
	  height: 70rpx;
	  padding: 0 30rpx 0 30rpx;
	  border: solid 1rpx #cccccc;
	  border-radius: 20rpx;
	  margin: 30rpx 0 30rpx 0;
	}
	.annquy{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width: 550rpx;
	}
	.quxiao{
	  width: 260rpx;
	  height: 80rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border: solid 1rpx #cacaca;
	  border-radius: 20rpx;
	  font-size: 35rpx;
	}
	.queren{
	  width: 260rpx;
	  height: 80rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #008be7;
	  color: #ffffff;
	  border-radius: 20rpx;
	  font-size: 35rpx;
	}
	.tuicdw{
		margin: 30rpx 20rpx 20rpx 20rpx;
		width: 710rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ff007f;
		/* border: solid 1rpx #4da8c3; */
		border-radius: 20rpx;
		color: #ffffff;
		font-weight: bold;
	}
	.baocun{
	  margin: 30rpx 20rpx 20rpx 20rpx;
	  width: 710rpx;
	  height: 80rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #55aaff;
	  /* border: solid 1rpx #4da8c3; */
	  border-radius: 20rpx;
	  color: #ffffff;
	  font-weight: bold;
	}
</style>
